<template>
  <view 
    class="fu-tab" 
    :class="[
      `fu-tab--${type}`,
      {
        'is-active': isActive,
        'is-disabled': disabled
      }
    ]"
    :style="[tabStyle]"
    @tap="onClick"
  >
    <view class="fu-tab__text" :style="[textStyle]">
      <slot>{{ label }}</slot>
    </view>
  </view>
</template>

<script>
/**
 * @description tab标签项组件
 * @property {String/Number} name 标签的值
 * @property {String} label 标签显示的文字
 * @property {Boolean} disabled 是否禁用
 */
export default {
  name: 'FuTab',

  props: {
    // 当前选中tab的值
    name: {
      type: [String, Number],
      required: true
    },
    // 显示文字
    label: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    isActive() {
      return this.$parent.currentValue === this.name
    },
    
    // 父组件的参数
    parentData() {
      const parent = this.$parent
      return {
        type: parent.type || 'default',
        activeColor: parent.activeColor,
        inactiveColor: parent.inactiveColor,
        fontSize: parent.fontSize,
        gutter: parent.gutter,
        bold: parent.bold
      }
    },
    
    // tab样式
    tabStyle() {
      const style = {}
      const { gutter } = this.parentData
      if (gutter) {
        style.paddingLeft = style.paddingRight = `${gutter}rpx`
      }
      return style
    },
    
    // 文字样式
    textStyle() {
      const style = {}
      const { type, fontSize, activeColor, inactiveColor, bold } = this.parentData
      
      // 字体大小
      if (fontSize) {
        style.fontSize = `${fontSize}rpx`
      }
      
      // 字体颜色
      if (this.isActive) {
        style.color = activeColor
        if (bold) style.fontWeight = 'bold'
      } else {
        style.color = inactiveColor
      }
      
      // 特殊类型样式
      if (type === 'card') {
        if (this.isActive) {
          style.backgroundColor = activeColor
          style.color = '#fff'
        } else {
          style.backgroundColor = '#fff'
        }
      }
      
      return style
    }
  },

  methods: {
    onClick() {
      if (!this.disabled) {
        this.$parent.onTabClick(this.name)
      }
    }
  }
}
</script>

<style lang="scss">
.fu-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 30rpx;
  position: relative;
  
  &--card {
    margin: 0 6rpx;
    border-radius: 6rpx;
    
    &:first-child {
      margin-left: 0;
    }
    
    &:last-child {
      margin-right: 0;
    }
  }
  
  &--button {
    margin: 0 6rpx;
    border-radius: 100rpx;
    
    &:first-child {
      margin-left: 0;
    }
    
    &:last-child {
      margin-right: 0;
    }
  }
  
  &--subsection {
    margin: 0;
    border-radius: 0;
    
    &:first-child {
      border-radius: 6rpx 0 0 6rpx;
    }
    
    &:last-child {
      border-radius: 0 6rpx 6rpx 0;
    }
  }
  
  &.is-disabled {
    opacity: 0.5;
  }
  
  &__text {
    font-size: 30rpx;
    color: #303133;
  }
}
</style> 